<template>
    <div class="app-container" style="height: 100%;">
        <div class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
            <div class="header_search">
                <el-date-picker v-model="valueTime" type="daterange" range-separator="~" start-placeholder="建单开始日期"
                    end-placeholder="建单结束日期" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss" />
                <!-- <el-date-picker v-model="valueTime2" type="daterange" range-separator="~" start-placeholder="充值开始时间"
                    end-placeholder="充值结束时间" @change="dateChange2" value-format="YYYY-MM-DD HH:mm:ss" /> -->
                <el-select class="input-with" filterable clearable v-model="goodsData.mode" @change="getList"
                    placeholder="充值方式">
                    <el-option v-for="item in mode" :value="item.val" :label="item.name" :key="item.val" />
                </el-select>
                <el-select class="input-with" filterable clearable v-model="goodsData.status" @change="getList"
                    placeholder="充值状态">
                    <el-option v-for="item in status" :value="item.val" :label="item.name" :key="item.val" />
                </el-select>
                <el-input v-model="goodsData.keyword" placeholder="订单号" class="input-with" clearable
                    @keyup.enter.native="getList">
                </el-input>
                <button class="btn btn-bg1" @click="getList">
                    <el-icon class="mr5">
                        <Search />
                    </el-icon>搜索
                </button>
            </div>
            <div class="table">
                <el-table border stripe resizable :data="tableData" ref="tableList" height="100%"
                    style="position: absolute;">
                    <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
                    <el-table-column show-overflow-tooltip prop="code" label="订单号" min-width="200" fixed />
                    <el-table-column show-overflow-tooltip prop="factory" label="商家名称" min-width="110" />
                    <el-table-column show-overflow-tooltip prop="model" label="充值金额" width="100" align="right">
                        <template v-slot="i">
                            ￥{{ Number(i.row.money).toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="paymentTime" label="支付时间" width="130" />
                    <el-table-column show-overflow-tooltip prop="status" label="支付状态" width="90">
                        <template v-slot="scope">
                            <el-tag type="warning" v-if="scope.row.status == 1">待支付</el-tag>
                            <el-tag v-if="scope.row.status == 2">已支付</el-tag>
                            <el-tag type="info" v-if="scope.row.status == 3">已取消</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="mode" label="支付方式" width="90">
                        <template v-slot="i">
                            <span>{{ mode[i.row.mode - 1].name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="createEmp" label="创建人员" width="100" />
                    <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="130" />
                    <el-table-column fixed="right" label="操作" width="100" align="center">
                        <template #default="scope">
                            <div class="flex-justify-between" v-if="scope.row.status == 1">
                                <span class="pay_sty" @click="pay_cancel(1, scope.row.id)">去支付</span>
                                <span class="pay_cancel" @click="pay_cancel(2, scope.row.id)">取消</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <Pagination ref="pagination" :list_total="total" @size-change="getList" @current-change="getList" />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="提示" width="380" draggable>
            <p>确定取消支付吗？</p>
            <br>
            <el-input v-model="remark"  :rows="2" type="textarea" placeholder="备注" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" color="#007cff" @click="onSave">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getRechargeDetailList, getGoodsTypeSelect, toRecharge } from '../../../api/voucher'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Warning } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const pagination = ref()
const tableList = ref()
const dialogVisible = ref(false)
const tableData = ref([]) // 品牌列表
const total = ref()
const remark = ref('')
const goodsData = ref({
    "createOrderEndTime": "",//订单创建结束时间
    "createOrderStartTime": "",//订单创建开始时间
    "keyword": "",//	关键词搜索：订单号
    "limit": 0,
    "mode": null,//充值方式：1-支付宝，2-微信，3-银联，4-对公支持，5-平台调整,示例值(null)
    "page": 0,
    "rechargeEndTime": "",//充值结束时间
    "rechargeStartTime": "",//充值开始时间
    "status": null//充值状态：1-待支付，2-已支付，3-已取消,示例值(null)	
})
const valueTime = ref()
const valueTime2 = ref()
const status = ref([{ name: '待支付', val: 1 }, { name: '已支付', val: 2 }, { name: '已取消', val: 3 }])
const mode = ref([{ name: '支付宝', val: 1 }, { name: '微信', val: 2 }, { name: '银联', val: 3 }, { name: '对公支持', val: 4 }, { name: '平台调整', val: 5 },{ name: '线下支付', val: 6 }])
// 获取充值明细列表
const getList = async () => {
    loading.value = true
    goodsData.value.limit = pagination.value.size
    goodsData.value.page = pagination.value.current
    await getRechargeDetailList(goodsData.value).then((res: any) => {
        total.value = parseInt(res.data.data.total)
        tableData.value = res.data.data.rows
    })
    loading.value = false
}
// 时间变化时
const dateChange = (val: any) => {
    if (val) {
        goodsData.value.createOrderStartTime = val[0]
        goodsData.value.createOrderEndTime = val[1]
    } else {
        goodsData.value.createOrderEndTime = ''
        goodsData.value.createOrderStartTime = ''
    }
    getList()
}
const dateChange2 = (val: any) => {
    if (val) {
        goodsData.value.rechargeStartTime = val[0]
        goodsData.value.rechargeEndTime = val[1]
    } else {
        goodsData.value.rechargeStartTime = ''
        goodsData.value.rechargeEndTime = ''
    }
    getList()
}
// 操作
const isId = ref(null)
const pay_cancel = (n, id) => {
    switch (n) {
        case 1:
            toRecharge(id).then(res => {
                if (res.data) {
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: res.data.success ? 'success' : 'error',
                    })
                    if (res.data?.success) {
                        // getList()
                    }

                }
            })
            break;
        case 2:
            dialogVisible.value = true
            isId.value = id
            break;


    }
}
// 确认取消
const onSave = () => {
    getGoodsTypeSelect({ remark: remark.value }, isId.value).then(res => {
        if (res.data) {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: res.data.success ? 'success' : 'error',
            })
            if (res.data?.success) {
                dialogVisible.value = false
                getList()
            }

        }
    })
}
onMounted(() => {
    getList()
})

</script>

<style scoped lang="scss">
@import './index';
</style>